<template>
    <!-- 地址四级联动选择组件 
    @desc 地址四级联动
    @author kyle
    @date 2021-03-015
    @props
      addressData   ———— 地址数据
    @method
      pickArea      ———— 选择完毕
  -->
    <view class="area-content">
        <view class="">
            <view class="fw-b fs-30 header">
                <text>请选择所在地区</text>
                <text @click="submit">确定</text>
            </view>
            <view class="all">
                <text class="btn small" :class="areaData.all ? 'select-all' : 'btn-gray-hollow'" @click="allFn"
                    >全国</text
                >
            </view>
            <view class="flex-v-c mt-70 area-selected color-gray-light">
                <text
                    class="mr-20 text-show-line-1"
                    :class="{ 'active-style': activeIndex === 0, 'selected-style': areaData.ProvinceName }"
                    @click="show(0)"
                    >{{ areaData.ProvinceName || "省" }}</text
                >
                <text
                    class="mr-20 text-show-line-1"
                    :class="{ 'active-style': activeIndex === 1, 'selected-style': areaData.CityName }"
                    @click="show(1)"
                    >{{ areaData.CityName || "市" }}</text
                >
                <text
                    class="mr-20 text-show-line-1"
                    :class="{ 'active-style': activeIndex === 2, 'selected-style': areaData.AreaName }"
                    @click="show(2)"
                    >{{ areaData.AreaName || "区/县" }}</text
                >
                <text
                    class="text-show-line-1"
                    :class="{ 'active-style': activeIndex === 3, 'selected-style': areaData.StreetName }"
                    @click="show(3)"
                    v-if="isShowStree"
                    >{{ areaData.StreetName || "街道/镇" }}</text
                >
            </view>
        </view>
        <scroll-view scroll-y="true" class="mt-80 fs-28 lh-76 area-list">
            <view v-show="showLevel === 0">
                <view
                    v-for="(item, index) in provinceList"
                    :key="index"
                    :class="{ 'active-item': areaData.ProvinceName === item.Name }"
                    @click="pick(item, 0)">
                    <text>{{ item.Name }}</text>
                </view>
            </view>
            <view v-show="showLevel === 1">
                <view
                    v-for="(item, index) in cityList"
                    :key="index"
                    :class="{ 'active-item': areaData.CityName === item.Name }"
                    @click="pick(item, 1)">
                    <text>{{ item.Name }}</text>
                </view>
            </view>
            <view v-show="showLevel === 2">
                <view
                    v-for="(item, index) in areaList"
                    :key="index"
                    :class="{ 'active-item': areaData.AreaName === item.Name }"
                    @click="pick(item, 2)">
                    <text>{{ item.Name }}</text>
                </view>
            </view>
            <view v-show="showLevel === 3" v-if="isShowStree">
                <view
                    v-for="(item, index) in streetList"
                    :key="index"
                    :class="{ 'active-item': areaData.StreetName === item.Name }"
                    @click="pick(item, 3)">
                    <text>{{ item.Name }}</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { GetCountrywideListBySelRegion } from "./api.js"
export default {
    name: "AreaSelect",
    components: {},
    props: {
        addressData: {
            // 地址数据
            type: Object,
            required: false,
            default: function () {
                return {}
            },
        },
        isShowStree: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            provinceList: [],
            cityList: [],
            areaList: [],
            streetList: [],
            showLevel: 0, // 当前显示的区域列表
            activeIndex: 0, // 当前在选的区域
            maxActiveIndex: 0, // 可切换最大index
            areaData: {}, // 当前选择的区域数据
            clickState: false,
        }
    },
    computed: {},
    watch: {
        addressData(newVal, oldVal) {
            this.init(newVal)
        },
    },

    created() {
        this.init(this.addressData)
    },
    methods: {
        init(data) {
            this.areaData = JSON.parse(JSON.stringify(data))
            const _this = this
            this.GetCountrywideListBySelRegion(0, -1, function () {
                _this.levelPlus(-1)
                _this.getCityList()
            })
        },
        getCityList() {
            const _this = this
            if (_this.areaData.ProvinceId) {
                _this.GetCountrywideListBySelRegion(_this.areaData.ProvinceId, 0, function () {
                    _this.levelPlus(0)
                    _this.getAreaList()
                })
            }
        },
        getAreaList() {
            const _this = this
            if (_this.areaData.CityId) {
                _this.GetCountrywideListBySelRegion(_this.areaData.CityId, 1, function () {
                    _this.levelPlus(1)
                    if (_this.isShowStree) {
                        _this.getStreetList()
                    }
                })
            }
        },
        getStreetList() {
            const _this = this
            if (_this.areaData.AreaId) {
                _this.GetCountrywideListBySelRegion(_this.areaData.AreaId, 2, function () {
                    _this.levelPlus(2)
                })
            }
        },
        show(level) {
            if (this.maxActiveIndex >= level) {
                this.activeIndex = level
                this.showLevel = level
            }
        },

        // 地址选择
        pick(item, level) {
            this.clickState = true
            const oldData = JSON.parse(JSON.stringify(this.areaData))
            this.areaData = {}
            this.areaData.all = ""
            switch (level) {
                case 0:
                    this.areaData.ProvinceName = item.Name
                    this.areaData.ProvinceId = item.ID
                    this.areaData.CityName = ""
                    this.areaData.CityId = 0
                    this.areaData.AreaName = ""
                    this.areaData.AreaId = 0
                    this.areaData.StreetName = ""
                    this.areaData.StreetId = 0
                    break
                case 1:
                    this.areaData.ProvinceName = oldData.ProvinceName
                    this.areaData.ProvinceId = oldData.ProvinceId
                    this.areaData.CityName = item.Name
                    this.areaData.CityId = item.ID
                    this.areaData.AreaName = ""
                    this.areaData.AreaId = 0
                    this.areaData.StreetName = ""
                    this.areaData.StreetId = 0
                    break
                case 2:
                    this.areaData.ProvinceName = oldData.ProvinceName
                    this.areaData.ProvinceId = oldData.ProvinceId
                    this.areaData.CityName = oldData.CityName
                    this.areaData.CityId = oldData.CityId
                    this.areaData.AreaName = item.Name
                    this.areaData.AreaId = item.ID
                    this.areaData.StreetName = ""
                    this.areaData.StreetId = 0
                    break
                case 3:
                    this.areaData = oldData
                    this.areaData.StreetName = item.Name
                    this.areaData.StreetId = item.ID
                    break
            }
            if (!this.isShowStree && level >= 2) {
                return
            }
            this.GetCountrywideListBySelRegion(item.ID, level, this.levelPlus(level))
        },

        levelPlus(level) {
            this.showLevel = level + 1
            this.activeIndex = level + 1
            this.maxActiveIndex = level + 1
        },

        // 获取地区列表
        GetCountrywideListBySelRegion(id, level, func) {
            GetCountrywideListBySelRegion({ parentId: id }).then((res) => {
                if (res.Data) {
                    switch (level) {
                        case -1:
                            this.provinceList = res.Data
                            break
                        case 0:
                            this.cityList = res.Data
                            break
                        case 1:
                            this.areaList = res.Data
                            break
                        case 2:
                            this.streetList = res.Data
                            break
                    }
                    if (typeof func === "function") {
                        func(level)
                    }
                    // if(res.Data.length<1 && this.clickState){
                    // 	this.$emit('pickArea', this.areaData)
                    // }
                }
            })
        },
        submit() {
            this.$emit("pickArea", this.areaData)
        },
        allFn() {
            this.areaData.all = "全国"
            this.areaData.ProvinceName = ""
            this.areaData.ProvinceId = 0
            this.areaData.CityName = ""
            this.areaData.CityId = 0
            this.areaData.AreaName = ""
            this.areaData.AreaId = 0
            this.areaData.StreetName = ""
            this.areaData.StreetId = 0
            this.activeIndex = 0
            this.showLevel = 0
            this.$forceUpdate()
        },
    },
}
</script>

<style lang="scss" scoped>
.area-content {
    background: $color-white;
    border-radius: 40rpx 40rpx 0 0;
    height: 75vh;
    padding: 42rpx;
    position: relative;
    .area-selected {
        margin-top: 20rpx;
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: row;
        &:after {
            content: "";
            position: absolute;
            top: 4rpx;
            left: calc(22.5% - 37rpx);
            width: calc(65% + 15rpx);
            height: 2rpx;
            background: $app-color-main;
        }
        text {
            display: flex;
            flex: 1;
            font-size: 28rpx;
            line-height: 80rpx;
            text-align: center;
            justify-content: center;
            position: relative;
            &:before {
                content: "";
                position: absolute;
                width: 8rpx;
                height: 8rpx;
                top: 0;
                left: calc(50% - 6rpx);
                background: $color-white;
                color: $app-color-main;
                border-radius: 100%;
                z-index: 1;
                border: 2rpx solid currentColor;
            }
            &.active-style {
                color: $app-color-text-tip;
                position: relative;
                &:after {
                    content: "";
                    position: absolute;
                    color: $app-color-main;
                    width: 46rpx;
                    height: 4rpx;
                    border-radius: 2rpx;
                    background: currentColor;
                    bottom: 2rpx;
                    left: calc(50% - 23rpx);
                }
            }
            &.selected-style {
                color: $app-color-text-main;
                &:before {
                    background: $app-color-main;
                }
            }
        }
    }
    .area-list {
        height: calc(100% - 150rpx);
        margin-top: 20rpx;
        overflow-y: scroll;
        text {
            height: 60rpx;
            display: flex;
        }
    }
    .active-item {
        position: relative;
        color: $app-color-main;
        padding-left: 50rpx;
        &:before {
            content: "";
            position: absolute;
            width: 10rpx;
            height: 20rpx;
            left: 5rpx;
            top: 0rpx;
            border: 4rpx solid;
            border-color: transparent currentColor currentColor transparent;
            transform: rotate(45deg);
        }
    }
}
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.all {
    height: 66rpx;
    display: flex;
    align-items: center;
    .small {
        margin-top: 20rpx;
        border-radius: 10rpx;
        height: 44rpx;
        font-size: $font-size-24;
    }
}
.select-all {
    border: solid 1rpx $app-color-main;
    color: $app-color-main;
}
</style>
